import React, { useState } from 'react';
import { Card, Spin, Button, Form, Row, Col, message } from 'antd';
import { useMount } from 'react-use';

import { BottomAction } from '@/components';
import { isSuccess } from '@/utils/request';
import { withRoutePage } from '@/utils/enhanceUtils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import pageTabUtil from '@/utils/pageTabUtil';

import BaseSettingProvider from '@/pages/SalaryManage/components/BaseSettingProvider';
import { NumberSettingInput } from '@/pages/SalaryManage/components/NumberSettingInput';
import { getSalaryPayrollTax, updateSalaryPayrollTax } from '@/services/salaryManage/salaryCalculate';
import tabMessageUtil from '@/pages/SalaryManage/utils/tabMessageUtil';
import { pageTabProps } from '@/pages/SalaryManage/utils';
import { OrganizationNameHead } from '@/pages/SalaryManage/components/OrganizationName';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';

const { Item } = Form;

const Section = ({ title, children }) => (
    <Row>
        <div className={salaryStyle.h}>{title}</div>
        <div>{children}</div>
    </Row>
);

const SectionItem = ({ children, ...restProps }) => (
    <Col md={24} lg={12} {...restProps}>
        {children}
    </Col>
);

const numberOption = (name, negative = false) => ({
    validateFirst: true,
    rules: [
        {
            required: true,
            message: `请填写${name}`
        },
        ...(negative
            ? []
            : [
                {
                    type: 'number',
                    min: 0,
                    message: `${name}不能小于0`
                }
            ]),
        {
            type: 'number',
            max: 9999999999.99,
            message: `${name}不能超过10亿`
        },
        {
            type: 'number',
            message: `${name}输入长度不能大于12`
        }
    ]
});

const SalaryPayrollTaxEdit = ({ form, location }) => {
    const [loading, setLoading] = useState(false);
    const [pageModel, setPageModel] = useState({});
    const { getFieldDecorator } = form;

    const { id } = location.query;

    // 取消
    const onCancel = () => pageTabUtil.closeTab();

    // 保存
    const onSave = () => {
        form.validateFieldsAndScroll((errors, values) => {
            if (errors) {
                return;
            }

            const postData = { ...pageModel, ...values };
            setLoading(true);
            updateSalaryPayrollTax(postData)
                .then(response => {
                    setLoading(false);
                    if (!isSuccess(response)) {
                        message.error(response.msg);
                        return;
                    }
                    message.success('保存成功！');
                    tabMessageUtil.noticeFromRefresh();
                    pageTabUtil.closeTab();
                })
                .catch(() => {
                    setLoading(false);
                });
        });
    };

    useMount(() => {
        setLoading(true);
        getSalaryPayrollTax({ id })
            .then(response => {
                setLoading(false);
                if (!isSuccess(response)) {
                    message.error(response.msg);
                    return;
                }
                setPageModel(response.data);
            })
            .catch(() => {
                setLoading(false);
            });
    });

    return (
        <PageHeaderWrapper type="success">
            <BaseSettingProvider organizationCode={pageModel.organizationCode}>
                <Card
                    bordered={false}
                    title="编辑个税初始化"
                    {...pageTabProps()}
                    extra={<OrganizationNameHead organizationCode={pageModel.organizationCode} />}
                >
                    <Spin spinning={loading}>
                        <Form
                            layout="horizontal"
                            labelCol={{ span: 11 }}
                            wrapperCol={{ span: 13 }}
                            style={{ maxWidth: '880px' }}
                    >
                            <Row gutter={32} style={{ marginLeft: 0, marginRight: 0 }}>
                                <Section title="个税初始化">
                                    <SectionItem>
                                        <Item label="员工姓名">
                                            <span style={{ whiteSpace: 'nowrap' }}>
                                                {pageModel?.employeeNo} {pageModel?.name}
                                            </span>
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="截止年月">
                                            {pageModel.year && pageModel.month
                                            ? `${pageModel.year}-${pageModel.month < 10 ? '0' : ''}${pageModel.month}`
                                            : ''}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计税前收入(截止当月)">
                                            {getFieldDecorator('encryptTotalIncomeAmt', {
                                            initialValue: pageModel?.encryptTotalIncomeAmt,
                                            ...numberOption('累计税前收入(截止当月)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计免税扣除额(截止当月)">
                                            {getFieldDecorator('encryptTotalNotaxAmt', {
                                            initialValue: pageModel?.encryptTotalNotaxAmt,
                                            ...numberOption('累计免税扣除额(截止当月)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计计税基数(截止当月)">
                                            {getFieldDecorator('encryptTotalTaxIncomeAmt', {
                                            initialValue: pageModel?.encryptTotalTaxIncomeAmt,
                                            ...numberOption('累计计税基数(截止当月)', true)
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计已缴个税(截止当月)">
                                            {getFieldDecorator('encryptTotalPayedTaxAmt', {
                                            initialValue: pageModel?.encryptTotalPayedTaxAmt,
                                            ...numberOption('累计已缴个税(截止当月)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                </Section>
                                <Section title="险金">
                                    <SectionItem>
                                        <Item label="累计养老保险(个人)">
                                            {getFieldDecorator('encryptTotalFundOldAmt', {
                                            initialValue: pageModel?.encryptTotalFundOldAmt,
                                            ...numberOption('累计养老保险(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计失业保险(个人)">
                                            {getFieldDecorator('encryptTotalFundUnemployAmt', {
                                            initialValue: pageModel?.encryptTotalFundUnemployAmt,
                                            ...numberOption('累计失业保险(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计医疗保险(个人)">
                                            {getFieldDecorator('encryptTotalFundHospitalAmt', {
                                            initialValue: pageModel?.encryptTotalFundHospitalAmt,
                                            ...numberOption('累计医疗保险(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>

                                    <SectionItem>
                                        <Item label="累计生育保险(个人)">
                                            {getFieldDecorator('encryptTotalFundBirthBaseAmt', {
                                            initialValue: pageModel?.encryptTotalFundBirthBaseAmt,
                                            ...numberOption('累计生育保险(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>

                                    <SectionItem>
                                        <Item label="累计工伤保险(个人)">
                                            {getFieldDecorator('encryptTotalFundHarmBaseAmt', {
                                            initialValue: pageModel?.encryptTotalFundHarmBaseAmt,
                                            ...numberOption('累计工伤保险(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>

                                    <SectionItem>
                                        <Item label="累计大病保险(个人)">
                                            {getFieldDecorator('encryptTotalFundIllBaseAmt', {
                                                initialValue: pageModel?.encryptTotalFundIllBaseAmt,
                                                ...numberOption('累计大病保险(个人)')
                                            })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>

                                    <SectionItem>
                                        <Item label="累计住房公积金(个人)">
                                            {getFieldDecorator('encryptTotalFundHouseAmt', {
                                            initialValue: pageModel?.encryptTotalFundHouseAmt,
                                            ...numberOption('累计住房公积金(个人)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                </Section>
                                <Section title="专项扣款">
                                    <SectionItem>
                                        <Item label="子女教育">
                                            {getFieldDecorator('encryptCurrChildEducationAmt', {
                                            initialValue: pageModel?.encryptCurrChildEducationAmt,
                                            ...numberOption('子女教育')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="继续教育">
                                            {getFieldDecorator('encryptCurrContinueEducationAmt', {
                                            initialValue: pageModel?.encryptCurrContinueEducationAmt,
                                            ...numberOption('继续教育')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="住房贷款利息">
                                            {getFieldDecorator('encryptCurrHouseLoanInterestAmt', {
                                            initialValue: pageModel?.encryptCurrHouseLoanInterestAmt,
                                            ...numberOption('住房贷款利息')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="住房租金">
                                            {getFieldDecorator('encryptCurrHouseLeaseAmt', {
                                            initialValue: pageModel?.encryptCurrHouseLeaseAmt,
                                            ...numberOption('住房租金')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem md={12} lg={12}>
                                        <Item label="赡养老人">
                                            {getFieldDecorator('encryptCurrRaiseOldAmt', {
                                            initialValue: pageModel?.encryptCurrRaiseOldAmt,
                                            ...numberOption('赡养老人')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                </Section>
                                <Section title="其他信息">
                                    <SectionItem>
                                        <Item label="累计免征额(截止当月)">
                                            {getFieldDecorator('encryptTotalExpenseAmt', {
                                            initialValue: pageModel?.encryptTotalExpenseAmt,
                                            ...numberOption('累计免征额(截止当月)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                    <SectionItem>
                                        <Item label="累计税后加减项(截止当月)">
                                            {getFieldDecorator('encryptTotalAfterTaxAmt', {
                                            initialValue: pageModel?.encryptTotalAfterTaxAmt,
                                            ...numberOption('累计税后加减项(截止当月)')
                                        })(<NumberSettingInput thousandsSeparator="," maxLength={15} />)}
                                        </Item>
                                    </SectionItem>
                                </Section>
                            </Row>
                        </Form>
                        <BottomAction>
                            <Button onClick={onCancel}>取消</Button>
                            <Button type="primary" onClick={onSave}>
                                确定
                            </Button>
                        </BottomAction>
                    </Spin>
                </Card>
            </BaseSettingProvider>
        </PageHeaderWrapper>
    );
};

export default withRoutePage(Form.create()(SalaryPayrollTaxEdit));
